<template>
  <div class="carousel4">
    <div class="container">
      <div v-fade-in id="car4-title" class="carousel-title">{{ data?.name }}</div>
      <div v-fade-in id="car4-content" class="carousel-content">
        {{ data?.introduce }}
      </div>
      <M-button v-slide-up @click="handleDetail" />
    </div>
    <Particles
      v-if="index == 3"
      pid="carousel4-particles"
      :max-size="3"
      :speed="3"
      :link="false"
      hover="grab"
    />
  </div>
</template>
<script lang="ts" setup>
const router = useRouter();
const props = defineProps({
  index: {
    type: Number,
    default: 0,
  },
  data: {
    type: Object,
    default: () => {
      return {
        name: "",
        introduce: "",
        id: "",
      };
    },
  },
});
// 跳转详情
const handleDetail = () => {
  router.push({ path: "/pc/scheme", query: { id: props.data.id } });
};
</script>
<style lang="scss" scoped>
.carousel4 {
  width: 100%;
  height: 100vh;
  background: url("@/assets/home/carousel4.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .container {
    position: relative;
    height: 100%;
    .carousel-title {
      position: absolute;
      left: 0;
      top: 240px;
      font-size: 36px;
      width: 65%;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 96px;
      color: #fff;
      z-index: 4;
    }
    .carousel-content {
      position: absolute;
      left: 0;
      top: 340px;
      font-size: 16px;
      width: 50%;
      letter-spacing: 0px;
      line-height: 30px;
      color: #fff;
      z-index: 4;
    }
    .more-btn {
      position: absolute;
      left: 1px;
      bottom: 30%;
    }
  }
}
</style>
